<template>
    <div>
        <p @click="count++">count:{{ count }}</p>
        <p>doubleCount:{{ doubleCount }}</p>

        <hr />
        <!-- 过滤数组 -->
        <ul>
            <li v-for="item in filterSchoolList" :key='item.id'>{{ item.school_name }}</li>
        </ul>

        <hr />
        <p>
            <input type="text" v-model="firstname" placeholder="姓">
        </p>
        <p>
            <input type="text" v-model="lastname" placeholder="名">
        </p>
        <p>
            <input type="text" v-model="fullname" placeholder="姓名">
        </p>
    </div>
</template>

<script setup>
// 组合式语法中的计算属性 computed
// 语法1:  只有get 的语法:
// const 计算属性的值 = computed(()=>{return 新值})  新值就是计算属性的值
// 语法2: 有get 和set 的语法
// const 计算属性值 = computed({get(){return 计算属性的值}, set(val){val就是修改的值}})

import axios from 'axios';
import { ref, reactive, computed } from 'vue';

// 案例1:
const count = ref(100);
const doubleCount = computed(() => {
    return count.value * 2
})

// 案例2:
const schoollist = ref([]);
axios.get('https://api.i-lynn.cn/college').then(res => {
    console.log(res);
    schoollist.value = res.data.data.list1
})

const filterSchoolList = computed(() => {
    return schoollist.value.filter(item => item.school_name.includes('北京'))
});


// 案例3: 
const firstname = ref('');
const lastname = ref('');
const fullname = computed({
    get() {
        return firstname.value + lastname.value
    },
    set(newvalue) {
        console.log('newvalue', newvalue);
        firstname.value = newvalue.slice(0, 1)
        lastname.value = newvalue.slice(1)
    }

})







</script>
<style scoped></style>